<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org/">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>叮叮金融-注册</title>
  <link rel="stylesheet" th:href="@{/css/login/materialdesignicons.min.css}">
  <link rel="stylesheet" th:href="@{/css/login/vendor.bundle.base.css}">
  <link rel="stylesheet" th:href="@{/css/login/style.css}">
</head>

<body>
  <div class="container-scroller d-flex">
    <div class="container-fluid page-body-wrapper full-page-wrapper d-flex">
      <div class="content-wrapper d-flex align-items-stretch auth auth-img-bg">
        <div class="row flex-grow">
          <div class="col-lg-6 d-flex align-items-center justify-content-center">
            <div class="auth-form-transparent text-left p-3">
              <span class="h3">正在注册 叮叮金融</span>
              <form lass="pt-3">
                <div class="form-group">
                  <label>
                    昵称<span class="text-danger">*</span>
                  </label>
                  <div class="input-group">
                    <div class="input-group-prepend bg-transparent">
                      <span class="input-group-text bg-transparent border-right-0">
                        <i class="mdi mdi-account-outline text-primary"></i>
                      </span>
                    </div>
                    <input name="nickName" type="text" class="form-control form-control-lg border-left-0" placeholder="nickName">
                  </div>
                </div>
                <div class="form-group">
                  <label>
                    手机号<span class="text-danger">*</span>
                  </label>
                  <div class="input-group">
                    <div class="input-group-prepend bg-transparent">
                      <span class="input-group-text bg-transparent border-right-0">
                        <i class="mdi mdi-cellphone-iphone text-primary"></i>
                      </span>
                    </div>
                    <input name="phone" type="text" class="form-control form-control-lg border-left-0" placeholder="phone">
                  </div>
                </div>
                <div class="form-group">
                  <label>
                    密码<span class="text-danger">*</span>
                  </label>
                  <div class="input-group">
                    <div class="input-group-prepend bg-transparent">
                      <span class="input-group-text bg-transparent border-right-0">
                        <i class="mdi mdi-lock-outline text-primary"></i>
                      </span>
                    </div>
                    <input name="password" type="password" class="form-control form-control-lg border-left-0" placeholder="password">
                    <div class="input-group-append bg-transparent">
                      <span class="input-group-text bg-transparent border-left-0" style="cursor: pointer">
                        <i id="showPassword" class="mdi mdi-eye text-primary"></i>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label>
                    验证码<span class="text-danger">*</span>
                  </label>
                  <div class="input-group">
                    <div class="input-group-prepend bg-transparent">
                      <span class="input-group-text bg-transparent border-right-0">
                        <i class="mdi mdi-shield-outline text-primary"></i>
                      </span>
                    </div>
                    <input name="verify" type="text" class="form-control form-control-lg border-left-0 mr-3" placeholder="verify code">
                    <button id="sendVerifyBtn" type="button" class="col-4 btn btn-info">发送验证码</button>
                  </div>
                </div>
                <div class="form-group">
                  <label>
                    推荐人<span class="text-secondary">(可以不填)</span>
                  </label>
                  <div class="input-group">
                    <div class="input-group-prepend bg-transparent">
                      <span class="input-group-text bg-transparent border-right-0">
                        <i class="mdi mdi-account-multiple text-primary"></i>
                      </span>
                    </div>
                    <input name="inviteNum"  type="text" class="form-control form-control-lg border-left-0" placeholder="inviter">
                  </div>
                </div>
                <div class="mt-3">
                  <input id="registerBtn" type="button" class="btn btn-block btn-success btn-lg font-weight-medium auth-form-btn" value="注册"/>
                </div>
                <div class="text-center mt-4 font-weight-light">
                  想登录吗? <a th:href="@{/login}">点这儿</a>
                </div>
              </form>
            </div>
          </div>
          <div class="col-lg-6 register-half-bg d-none d-lg-flex flex-row">
            <p class="text-white font-weight-medium text-center flex-grow align-self-end">Copyright &copy; 2020  叮叮金融.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" th:src="@{/js/login/vendor.bundle.base.js}"></script>
  <script type="text/javascript" th:src="@{/js/login/off-canvas.js}"></script>
  <script type="text/javascript" th:src="@{/js/login/hoverable-collapse.js}"></script>
  <script type="text/javascript" th:src="@{/js/login/template.js}"></script>
  <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
  <script type="text/javascript" th:src="@{/layer/layer.js}"></script>
</body>
<script type="text/javascript">
  //显示与隐藏密码
  $(".input-group-append").click(function () {
    if($("#showPassword").hasClass("mdi-eye")){
      $("input[name='password']").attr("type","text");
      $("#showPassword").removeClass("mdi-eye");
      $("#showPassword").addClass("mdi-eye-off");
    }else {
      $("input[name='password']").attr("type","password");
      $("#showPassword").removeClass("mdi-eye-off");
      $("#showPassword").addClass("mdi-eye");
    }
  })

  $(function () {
    //发送验证码
    var verBtn = document.getElementById("sendVerifyBtn");
    var time = 60;
    verBtn.onclick = function() {
      //防止发送多次
      verBtn.style.cursor = "no-drop";
      verBtn.disabled = true;

      //请求发送验证码
      $.post("/sendRegisterVerify",{phone:$("input[name='phone']").val()},function (data) {
        if (data == "success"){
          //发送成功弹窗提示
          layer.msg('发送成功', {time: 3000, icon:1});

          //一分钟内禁止再次发送
          var timer = setInterval(function() {
            time--;
            verBtn.innerHTML = time + "秒";
            verBtn.disabled = true;
            //禁止手势
            $(verBtn).css("cursor","no-drop");
            if(time == 0) {
              time = 60;
              clearInterval(timer);
              verBtn.innerHTML = "发送验证码";
              verBtn.disabled = false;
              $(verBtn).css("cursor","pointer");
            }
          }, 1000);

        } else {
          verBtn.style.cursor = "pointer";
          verBtn.disabled = false;
          $("input[name='phone']").focus();
          layer.msg(data, {time: 3000, icon:7});
        }
      },"text")
    }
  })

  $("#registerBtn").click(function () {
    this.style.cursor = "no-drop";
    this.disabled = true;
    var nickName = $("input[name='nickName']");
    var phone = $("input[name='phone']");
    var verify = $("input[name='verify']");
    var password = $("input[name='password']");
    var inviteNum = $("input[name='inviteNum']");

    //对昵称进行校验
    if (nickName.val() == null || nickName.val().length == 0) {
      layer.msg("请输入昵称",{time: 3000, icon:7})
      nickName.focus();
      document.getElementById("registerBtn").disabled = false;
      $(document.getElementById("registerBtn")).css("cursor","pointer");
      return;
    } else if(nickName.val().length < 3 || nickName.val().length > 16){
      layer.msg("昵称长度请控制在 3~16",{time: 3000, icon:7})
      nickName.focus();
      document.getElementById("registerBtn").disabled = false;
      $(document.getElementById("registerBtn")).css("cursor","pointer");
      return;
    } else if(!(/^[\u4E00-\u9FA5A-Za-z0-9]+$/.test(nickName.val()))){
      layer.msg("昵称不能包含特殊字符",{time: 3000, icon:7})
      nickName.focus();
      document.getElementById("registerBtn").disabled = false;
      $(document.getElementById("registerBtn")).css("cursor","pointer");
      return;
    }

    //校验手机号
    if (phone.val() == null || phone.val().length == 0) {
      layer.msg("请输入手机号",{time: 3000, icon:7})
      nickName.focus();
      document.getElementById("registerBtn").disabled = false;
      $(document.getElementById("registerBtn")).css("cursor","pointer");
      return;
    } else if(!(/^1[3-9]\d{9}$/.test(phone.val()))){
      layer.msg("手机号格式错误",{time: 3000, icon:7})
      inviteNum.focus();
      document.getElementById("registerBtn").disabled = false;
      $(document.getElementById("registerBtn")).css("cursor","pointer");
      return;
    }

    //校验验证码
    if (verify.val() == null || verify.val().length == 0) {
      layer.msg("请输入验证码",{time: 3000, icon:7})
      nickName.focus();
      document.getElementById("registerBtn").disabled = false;
      $(document.getElementById("registerBtn")).css("cursor","pointer");
      return;
    } else if(!(/^[0-9]{6}/.test(verify.val()))) {
      layer.msg("请输入正确的验证码",{time: 3000, icon:7})
      verify.focus()
      document.getElementById("registerBtn").disabled = false;
      $(document.getElementById("registerBtn")).css("cursor","pointer");
      return;
    }

    //校验密码
    if (password.val() == null || password.val().length == 0) {
      layer.msg("请输入密码",{time: 3000, icon:7})
      nickName.focus();
      this.disabled = false;
      $(this).css("cursor","pointer");
      return;
    } else if (!(/^[a-zA-Z0-9.]{6,20}$/.test(password.val()))){
      layer.msg("密码只能包含 字母、数字、下划线,且长度控制在6~20",{time: 3000, icon:7})
      password.focus();
      document.getElementById("registerBtn").disabled = false;
      $(document.getElementById("registerBtn")).css("cursor","pointer");
      return;
    }

    //校验推荐人
    if(!(/^1[3-9]\d{9}$/.test(inviteNum.val())) && inviteNum.val().length != 0){
      layer.msg("推荐人格式错误",{time: 3000, icon:7})
      inviteNum.focus();
      document.getElementById("registerBtn").disabled = false;
      $(document.getElementById("registerBtn")).css("cursor","pointer");
      return;
    }
    $.ajax({
      url:"/userRegister",
      type:"POST",
      data: {
        "nickName":nickName.val(),
        "phone":phone.val(),
        "verify":verify.val(),
        "nickName":nickName.val(),
        "password":password.val(),
        "inviteNum":inviteNum.val()
      },
      dataType:"text",
      success:function (data) {
        //console.log(data)
        if (data == "success"){
          layer.msg("注册成功,即将前往登录页面",{time: 3000, icon:6});
          setTimeout(function () {
            window.location.href = "/login"
          },3000)
        } else {
          document.getElementById("registerBtn").disabled = false;
          $(document.getElementById("registerBtn")).css("cursor","pointer");
          layer.msg(data);
        }
      },
      error:function (data) {
        //console.log(data)
      }
    })
  })

</script>
</html>
